import { ComponentProps, VueComponent } from "vue3-oop"
import { Image } from 'ant-design-vue';
import { WidgetNode } from '../../types'
import { IMAGE,defaultFallback } from "./attr-image";

interface IProps {
  widgetNode: WidgetNode
}
export default class FvrImage extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  render() {
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem[widgetItem.type] as IMAGE;

    const fallback = (!attr.field_default||attr.field_default===''||attr.field_default==='default')?defaultFallback:attr.field_default
    return (
      <div
        style={{
          width:`${attr.width}px`,
          height:`${attr.height}px`,
          overflow: 'hidden'
        }}
      >
        <Image 
          width={attr.width}
          height={attr.height}
          alt={attr.field_label}
          src={attr.field_value}
          fallback={fallback}
          placeholder={true}
        />
      </div>
    )
  }
}